<script setup>
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { fetchIndices3Data } from '@/api/weatherAPI';
import { useCityStore } from '../stores/cityStore';

const route = useRoute()
const cityStore = useCityStore()
const indices3d = ref([])
const type = computed(() => route.params.type)
const name = computed(() => route.query.name)

watch(() => cityStore.location.id,
    (newId) => {
        if (newId) {
            getData(newId)
        }
    },
    { immediate: true }
)

async function getData(locationId) {
    try {
        const res = await fetchIndices3Data(locationId, type.value)
        console.log('三天指数数据:', res)
        indices3d.value = res.daily
    } catch (error) {
        console.error('获取数据失败:', error)
    }
}
</script>

<template>
    <div class="living-index-detail">
        <h2>{{ name }}</h2>
        <div class="indices-list">
            <div v-for="(item, index) in indices3d" :key="index" class="index-card">
                <div class="date">
                    <span class="weekday">{{ ['今天', '明天', '后天'][index] }}</span>
                    <span class="day">{{ item.date.slice(5) }}</span>
                </div>
                <div class="category" :class="[item.category === '舒适' ? 'comfortable' : 'uncomfortable']">
                    {{ item.category }}
                </div>
                <p class="text">{{ item.text }}</p>
            </div>
        </div>
    </div>
</template>

<style scoped>
.living-index-detail {
    padding: 20px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

h2 {
    color: #2c3e50;
    font-size: 24px;
    margin-bottom: 20px;
}

.indices-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.index-card {
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.weekday {
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

.day {
    color: #666;
}

.category {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    margin: 10px 0;
    font-weight: 500;
}

.comfortable {
    background: #00ff0d;
    color: #135200;
}

.uncomfortable {
    color: #ff0000;
}

.text {
    color: #000000;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    margin: 10px 0;
}
</style>